<template>
  <div>
    <x-header>
      {{ task.name }}
      <router-link to="/" slot="right">
        <a class="fa fa-home fa-15x"></a>
      </router-link>
    </x-header>
    <div class="formBox gzbank-style">
      <div v-if="form.type == 'INNER'">
        <ab-custom-form></ab-custom-form>
      </div>
      <div v-if="form.type == 'FRAME'">
        <ab-url-form ref="urlForm" :form="form"></ab-url-form>
      </div>
    </div>
    <bpm-buttons :buttons="buttons" class="gzbank-style"></bpm-buttons>
    <div v-if="dynamicComponent.show" :is="dynamicComponent.key" @cancel="dynamicComponent.show = false"
      @callback="dynamicComponent.callback" :name="dynamicComponent.name" :show-dialog="dynamicComponent.show"
      :passConf="dynamicComponent.flowParam"></div>
  </div>
</template>

<script>
  import Vue from "vue";
  import bpmService from "@/service/bpm/bpmService";
  import formService from "@/service/form/formService";

  export default {
    name: "taskForm",
    methods: {
      getTaskData() {
        console.log("on item click");
      },
    },
    data: function() {
      return {
        task: "",
        instance: "",
        form: "",
        buttons: "",
        flowRequestParam: {}, // 最终提交的数据
        configSpecified: {}, // 流程配置信息
        dynamicComponent: {
          key: "opinion-dialog",
          show: false,
        },
      };
    },
    created: function() {
      this.taskId = this.$route.query.taskId;
      var thisVue = this;
      bpmService.init({
         taskId: this.taskId,
          formType: "mobile"
        },
        function(data) {
          formService.initCustFormFu(data.form.formHtml, data);
          thisVue.form = data.form;
          thisVue.task = data.task;
          thisVue.buttons = data.buttonList;
          thisVue.instance = data.instance;
          thisVue.flowRequestParam = data.flowRequestParam;
          thisVue.configSpecified = data.configSpecified;
        }
      );
    },
  };
</script>

<style scoped>
</style>
